<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> -->
    <script src="../js/axios.min.js"></script>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <button @click="getHanlder">get</button>
        <button @click="postHanlder">post</button>
    </div>
</body>
<script>
    // axios => 第三方插件(浏览器中: 本质上就是Promise封装的ajax)

    // Axios 是什么?
    // Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。


    // 先下载
    // 1. CDN => 在线地址
    // 2. 基于npm安装 => 脚手架中使用

    // 在使用
    // 本地引入 => 全局函数 axios => 可以作为普通函数调用 


    // 语法
    // axios(config)    => 发送ajax请求,返回一个Promise实例(pending),等请求成功之后会变为fulfilled,并返回响应对象(axios自己配置的)
    
    // 请求配置
    // config => axios的配置对象
    //  method  请求方式(get/post)
    //  baseURL 基本地址(`baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL)
    //  url     请求地址
    //  headers 自定义头信息
    //  params  以get方式传递数据(对象)
    //  data    以post方式传递数据(对象 / 参数数据队列)
    //  timeout 指定请求超时的毫秒数。
    //   responseType: 'json', // 默认值JSON  

    // 响应结构:(一个请求的响应包含以下信息。)
    /* {
         // `data` 由服务器提供的响应
        data: {},

        // `status` 来自服务器响应的 HTTP 状态码
        status: 200,

        // `statusText` 来自服务器响应的 HTTP 状态信息
        statusText: 'OK',

        // `headers` 是服务器响应头
        // 所有的 header 名称都是小写，而且可以使用方括号语法访问
        // 例如: `response.headers['content-type']`
        headers: {},

        // `config` 是 `axios` 请求的配置信息
        config: {},

        // `request` 是生成此响应的请求
        // 在node.js中它是最后一个ClientRequest实例 (in redirects)，
        // 在浏览器中则是 XMLHttpRequest 实例
        request: {}
    } */



    console.log(axios); // 全局方法

    var vm = new Vue({
        el:"#app",
        data:{
            searchParams:{
                wd:"",
                col:"id",
                type:"asc",
                page:1,
                size:10,
            },
            loginParams:{
                user:"a123123",
                pwd:"123123",
            }
        },
        methods:{
            getHanlder(){
                // 以get方式发送请求 获取数据
                axios({
                    method:"get",
                    baseURL:"http://121.43.116.41/demo",
                    url:"/php/searchGoodsOrderLimit.php",
                    params:this.searchParams,
                    responseType:"json",
                }).then(response=>{
                    console.log("axios配置的响应对象",response);
                    return response.data;
                }).then(data=>{
                    console.log("响应数据",data);
                })
            },
            postHanlder(){
                 // 以post方式发送请求 获取数据
                 axios({
                    method:"post",
                    baseURL:"http://121.43.116.41/demo",
                    url:"/php/login.php",
                    headers:{
                        "Content-Type":"application/x-www-form-urlencoded",
                    },
                    data:this.loginParams,
                    responseType:"json",
                }).then(response=>{
                    console.log("axios配置的响应对象",response);
                    return response.data;
                }).then(data=>{
                    console.log("响应数据",data);
                })
            }
        }
    })
    



</script>
</html>